


const { Component } = require("react");


class DemoA extends Component {
  constructor(props) {
    super(props)
    this.state = {
      num: 1,
      count: 0
    }
  }
  add() {
    this.setState((state, props) => ({ num: state.num + 1 }))
  }
  render() {
    console.log("render...");
    let { num, count } = this.state;
    return (
      <div>
        <h2>类组件，更新了{count}次</h2>
        <h3>{num}</h3>
        <button onClick={this.add.bind(this)}>+1</button>
      </div>
    )
  }

  componentDidUpdate(props, state) {
    // 监听count以外的其它的状态变化
    if (state.count === this.state.count) {
      this.setState(state => ({count:state.count+1}))
    }

    // 只监听num的变化
    if (state.num !== this.state.num) {
      console.log("num变化了");
      // todo....
    }

    console.log("componentDidUpdate...");
  }

  componentDidMount() {
    console.log("componentDidMount...");
  }
}

export default DemoA;

// componentDidUpdate
//   1）可以调用setState，但是必须给出出口（终止条件），否则会产生死循环，循环到一定次数就会报错。
//   2）模拟vue中的监听器，特别需要注意终止条件。
//   3）this.setState中的callback来实现，不建议使用，因为setState会合并，callback容易出问题。
